<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../common.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>监控项列表</title>
<style> 
.table-edit {
	border-collapse: collapse;
	border-spacing:0; 
}
.table-edit tr{height:22px;}
.table-edit td{	
	border-color:#cccccc;
	border-width:0px 0px 1px 0px;
	padding:5px;
	text-align: left;
}
</style>
<script>
$(function() { 
	$('#list').datagrid({
		url: '${ctx}/monitorSystem/monitorSystemList',
// 		queryParams:{"isLoad":1},
		height: size.height-120,
		idField: 'id',
		nowrap: false, //内容换行
		striped: true, //条纹
        fit: true,
		singleSelect: true, //是否单选
        frozenColumns: [[
        	{field:'ck',checkbox:true}
        ]],
		columns: [[
			{field:"id",title:"编号",align:"center",width:fixWidth(0.1)},  
			{field:"name",title:'系统名称',width:fixWidth(0.1)},
			{field:"describe",title:'描述',align:"center",width:fixWidth(0.4)},
			{field:"loginName",title:'登录名称',width:fixWidth(0.1)},
			{field:"email",title:'报警邮箱地址',align:"center",width:fixWidth(0.1)},
			{field:"dbUsername",title:'监控数据库名称',width:fixWidth(0.1)}
		]],
		rownumbers : true, //记录号
		pagination : true,
        toolbar: "#tb"
	}); 
	//初始化分页
	initListPage("list");
});

//查询
function searchResult(){
	var id = $("#id").val();
	var name = $("#name").val();
	var sdata = {
		"id" : id,
		"name" : name
	};
	$('#list').datagrid('load', sdata);
	$('#list').datagrid("clearSelections");
}

//重置
function resetedResult(){
	$('#searchForm').form('load',{
		id:'',
		name:''
	});
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'搜索条件',split:true" style="height:100px;"  >
	<form action="" name="searchForm" id="searchForm" method="post"> 
		<table class="table-edit" style="margin:10px;">
			<tr>
				<td align="right">
					<span>监控项编号：</span>
				</td>
				<td align="left">
					<input class="easyui-textbox" id="id" name="id" style="width:180px;">
				</td>
				<td align="right">
					<span>监控项名称：</span>
				</td>
				<td align="left">
					<input class="easyui-textbox" id="name" name="name" style="width:180px;">
				</td>
				<td>
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="searchResult()" style="width:80px">搜索</a>
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="resetedResult()" style="width:80px">重置</a>
				</td>
			</tr>
		</table>
	</form>
</div>

<!-- 列表 -->
<div data-options="region:'center'" style="overflow: hidden;">
    <table id="list"></table>
</div> 

<!-- 按钮区 -->
<div id="tb">
	<span>
	    <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addmonitorSystem()">添加监控系统</a>
	</span>
	<span>
	    <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editmonitorSystem()">编辑监控系统</a>
	</span>
</div>

<!-- 弹窗 -->
<div id="addmonitorSystemDiv">
	<iframe id="monitorSystemIframe" width="100%" height="510" style="border:0" src="" ></iframe>
</div>

<script type="text/javascript">
//添加监控项
function addmonitorSystem(){
	$("#addmonitorSystemDiv").dialog({
		title: "监控项",
		modal: true,
		width: 850,
		height: 550		
	});
	$("#monitorSystemIframe").attr("src","${ctx}/monitorSystem/toEdit")
  	$('#addmonitorSystemDiv').dialog('open');
}

//编辑监控项
function editmonitorSystem(){
	//获取选中项
	var row = $('#list').datagrid('getSelected');
	if (!row){
		$.messager.alert('提示', "请选择监控记录");
		return;
	}
	$("#addmonitorSystemDiv").dialog({
		title: "监控项",
		modal: true,
		width: 700,
		height: 550		
	});
	$("#monitorSystemIframe").attr("src","${ctx}/monitorSystem/toEdit?id="+row.id);
  	$('#addmonitorSystemDiv').dialog('open');
}

</script>
</body>
</html>